<template>
  <div>
    <div class="home">
      <div class="header">
        <el-input
          class="input-container"
          v-model="containerNo"
          placeholder="请输入箱号"
          @keyup.enter.native="getContainerNo"
        ></el-input>

        <el-select
          v-model="speed"
          placeholder="请选择轨迹运行速度"
          @change="getContainerNo"
        >
          <el-option value="0.3" :label="getLabel(0.3)"></el-option>
          <el-option value="0.2" :label="getLabel(0.2)"></el-option>
          <el-option value="0.05" selected :label="getLabel(0.05)"></el-option>
        </el-select>
        <el-button @click="getContainerNo">轨迹跟踪</el-button>
        <!-- <el-button @click="getContainerNum">箱数查询</el-button> -->
        <div class="times">
          {{ timeNew }}
        </div>
        <!-- <div class="footer" @click="goBack">
          <img src="@/assets/images/back.png" alt="" />
        </div> -->
      </div>
      <div class="containerNum">
        <div @click="handledrawer" class="containerBtn">市配未完成箱号定位</div>
      </div>
      <el-drawer
        title="点击对应箱号查询箱子轨迹"
        :visible.sync="drawer"
        :direction="direction"
      >
        <div class="totalBox">箱子总数:{{ totalNum }}</div>
        <div class="containerBox">
          <div v-for="(item, index) in containerList" :key="index">
            <div
              class="containerItem"
              @click="getContainerlist(item.boxback)"
              :style="{backgroundColor:item.packStatus}"
            >
              <div>{{ item.boxback }}</div>
              <div class="createtime">{{ item.addTime }}</div>
            </div>
          </div>
        </div>
      </el-drawer>
      <canvas ref="canvas1" width="1920" height="1000" class="canvas1"></canvas>
      <div class="canvas-box">
        <canvas id="canvas" width="1920" height="1000" class="canvas2"
          >不支持canvas</canvas
        >
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body="false"
      >
        <span>{{ bMessage }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="footerbg">
      <div class="centerView">
        <img src="@/assets/images/back.png" alt="" @click="goBack" />
        <span @click="goBack">退出</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getcontainerNo, containerlistData } from "@/api/subSystem/continer";
export default {
  name: "DemoChan",
  data() {
    return {
      drawer: false,
      direction: "ltr",
      // 计时器
      setIntervaltime: null,
      // 绑箱信息
      bMessage: null,
      dialogVisible: false,
      // 鼠标点击x坐标
      xMouse: "",
      yMouse: "",
      //绑箱时间戳
      formattedTime: null,
      // 最后一个点
      lastItem: [],
      lastNode: null,
      targetTime: null,
      timeDiff: null,
      timeNew: null,
      currentTime: null, //系统时间
      intervalId: null,
      speed: "0.2",
      loadingInstance: "",
      containerNo: "",
      cvs: "",
      ctx: "",
      ctx1: "",
      startTime: "",
      timer: 0,
      points: [], //已经运动过的数据
      points1: [],
      //当前运动点位置
      animatePoint: {
        x: 0,
        y: 0,
      },
      nextPointIndex: 1, //下一个运动点的index
      routes1: [
        { x: 126, y: 873, text: "FZ06" },
        { x: 228, y: 873, text: "FZ07" },
        { x: 329, y: 873, text: "FZ08" },
        { x: 433, y: 873, text: "FZ09" },
        { x: 534, y: 873, text: "FZ10" },
        { x: 635, y: 873, text: "FZ11" },
        { x: 756, y: 873, text: "FZ12" },
        { x: 862, y: 873, text: "FZ13" },
        { x: 1771, y: 125, text: "B2F101" },
        { x: 1771, y: 262, text: "B2F102" },
        { x: 1771, y: 222, text: "PK252" },
        { x: 1771, y: 235, text: "PK257" },
        { x: 1771, y: 398, text: "B2F103" },
        { x: 1771, y: 355, text: "PK251" },
        { x: 1771, y: 370, text: "PK256" },
        { x: 1771, y: 535, text: "B2F104" },
        { x: 1771, y: 495, text: "PK250" },
        { x: 1771, y: 510, text: "PK255" },
        { x: 1771, y: 671, text: "B2F105" },
        { x: 1771, y: 632, text: "PK249" },
        { x: 1771, y: 648, text: "PK254" },
        { x: 1771, y: 808, text: "B2F106" },
        { x: 1771, y: 770, text: "PK248" },
        { x: 1771, y: 785, text: "PK253" },
        { x: 1771, y: 873, text: "FZ01" },
        { x: 1835, y: 910, text: "FZ02" },
        { x: 1771, y: 946, text: "FZ03" },
        { x: 1603, y: 835, text: "B2F441" },
        { x: 1603, y: 873, text: "B2F221" },
        { x: 1442, y: 873, text: "B2F431" },
        { x: 1380, y: 873, text: "B2F220" },
        { x: 1332, y: 873, text: "B2F219" },
        { x: 1267, y: 873, text: "B2F218" },
        { x: 1108, y: 874, text: "B2F217" },
        { x: 1009, y: 853, text: "B2F216" },
        { x: 998, y: 745, text: "B2F215" },
        { x: 965, y: 745, text: "B2F214" },
        { x: 932, y: 745, text: "B2F213" },
        { x: 976, y: 945, text: "B2F222" },
        { x: 840, y: 873, text: "B2F211" },
        { x: 922, y: 875, text: "B2F212" },
        { x: 734, y: 873, text: "B2F210" },
        { x: 612, y: 873, text: "B2F209" },
        { x: 512, y: 873, text: "B2F208" },
        { x: 410, y: 873, text: "B2F207" },
        { x: 308, y: 873, text: "B2F206" },
        { x: 206, y: 873, text: "B2F205" },
        { x: 103, y: 873, text: "B2F204" },
        { x: 1065, y: 903, text: "B2F201" },
        { x: 679, y: 945, text: "B2F202" },
        { x: 354, y: 943, text: "B2F203" },
        { x: 55, y: 910, text: "FZ05" },
        { x: 95, y: 943, text: "FZ04" },
        { x: 104, y: 176, text: "B2F312" },
        { x: 104, y: 228, text: "PK202" },
        { x: 126, y: 268, text: "B2F313" },
        { x: 126, y: 228, text: "PK205" },
        { x: 104, y: 543, text: "B2F311" },
        { x: 104, y: 660, text: "PK201" },
        { x: 126, y: 543, text: "B2F314" },
        { x: 126, y: 448, text: "PK204" },
        { x: 126, y: 759, text: "B2F315" },
        { x: 126, y: 660, text: "PK203" },
        { x: 208, y: 115, text: "B2F323" },
        { x: 206, y: 174, text: "PK208" },
        { x: 228, y: 268, text: "B2F324" },
        { x: 228, y: 174, text: "PK211" },
        { x: 208, y: 350, text: "B2F322" },
        { x: 206, y: 393, text: "PK207" },
        { x: 228, y: 510, text: "B2F325" },
        { x: 228, y: 393, text: "PK210" },
        { x: 208, y: 600, text: "B2F321" },
        { x: 206, y: 708, text: "PK206" },
        { x: 228, y: 760, text: "B2F326" },
        { x: 228, y: 708, text: "PK209" },
        { x: 308, y: 113, text: "B2F333" },
        { x: 308, y: 228, text: "PK214" },
        { x: 308, y: 350, text: "B2F332" },
        { x: 308, y: 448, text: "PK213" },
        { x: 308, y: 600, text: "B2F331" },
        { x: 308, y: 660, text: "PK212" },
        { x: 329, y: 267, text: "B2F334" },
        { x: 329, y: 228, text: "PK217" },
        { x: 329, y: 510, text: "B2F335" },
        { x: 329, y: 448, text: "PK216" },
        { x: 329, y: 760, text: "B2F336" },
        { x: 329, y: 660, text: "PK215" },
        { x: 412, y: 113, text: "B2F343" },
        { x: 412, y: 170, text: "PK220" },
        { x: 412, y: 350, text: "B2F342" },
        { x: 412, y: 393, text: "PK219" },
        { x: 412, y: 600, text: "B2F341" },
        { x: 412, y: 708, text: "PK218" },
        { x: 434, y: 265, text: "B2F344" },
        { x: 434, y: 170, text: "PK223" },
        { x: 434, y: 510, text: "B2F345" },
        { x: 434, y: 393, text: "PK222" },
        { x: 433, y: 761, text: "B2F346" },
        { x: 433, y: 708, text: "PK221" },
        { x: 512, y: 113, text: "B2F353" },
        { x: 512, y: 228, text: "PK226" },
        { x: 512, y: 340, text: "B2F352" },
        { x: 512, y: 448, text: "PK225" },
        { x: 512, y: 593, text: "B2F351" },
        { x: 512, y: 660, text: "PK224" },
        { x: 534, y: 288, text: "B2F354" },
        { x: 534, y: 228, text: "PK229" },
        { x: 534, y: 495, text: "B2F355" },
        { x: 534, y: 448, text: "PK228" },
        { x: 534, y: 750, text: "B2F356" },
        { x: 534, y: 660, text: "PK227" },
        { x: 612, y: 113, text: "B2F363" },
        { x: 612, y: 170, text: "PK232" },
        { x: 612, y: 340, text: "B2F362" },
        { x: 612, y: 393, text: "PK231" },
        { x: 612, y: 595, text: "B2F361" },
        { x: 612, y: 708, text: "PK230" },
        { x: 635, y: 288, text: "B2F364" },
        { x: 635, y: 170, text: "PK235" },
        { x: 635, y: 497, text: "B2F365" },
        { x: 635, y: 393, text: "PK234" },
        { x: 635, y: 750, text: "B2F366" },
        { x: 635, y: 708, text: "PK233" },
        { x: 733, y: 113, text: "B2F373" },
        { x: 733, y: 228, text: "PK238" },
        { x: 733, y: 342, text: "B2F372" },
        { x: 733, y: 448, text: "PK237" },
        { x: 733, y: 595, text: "B2F371" },
        { x: 733, y: 655, text: "PK236" },
        { x: 756, y: 286, text: "B2F374" },
        { x: 756, y: 228, text: "PK241" },
        { x: 756, y: 498, text: "B2F375" },
        { x: 756, y: 448, text: "PK240" },
        { x: 756, y: 750, text: "B2F376" },
        { x: 756, y: 655, text: "PK239" },
        { x: 839, y: 114, text: "B2F383" },
        { x: 839, y: 170, text: "PK244" },
        { x: 840, y: 349, text: "B2F382" },
        { x: 839, y: 393, text: "PK243" },
        { x: 839, y: 600, text: "B2F381" },
        { x: 839, y: 708, text: "PK242" },
        { x: 862, y: 268, text: "B2F384" },
        { x: 862, y: 170, text: "PK247" },
        { x: 862, y: 510, text: "B2F385" },
        { x: 862, y: 393, text: "PK246" },
        { x: 862, y: 763, text: "B2F386" },
        { x: 862, y: 708, text: "PK245" },
        { x: 1603, y: 743, text: "F125" },
        { x: 1603, y: 743, text: "F124" },
        { x: 1603, y: 613, text: "F123" },
        { x: 1603, y: 613, text: "F122" },
        { x: 1603, y: 484, text: "F121" },
        { x: 1603, y: 484, text: "F120" },
        { x: 1603, y: 354, text: "F119" },
        { x: 1603, y: 354, text: "F118" },
        { x: 1603, y: 225, text: "F117" },
        { x: 1603, y: 225, text: "F116" },
        { x: 1603, y: 743, text: "F115" },
        { x: 1603, y: 743, text: "F114" },
        { x: 1603, y: 613, text: "F113" },
        { x: 1603, y: 613, text: "F112" },
        { x: 1603, y: 484, text: "F111" },
        { x: 1603, y: 484, text: "F110" },
        { x: 1603, y: 354, text: "F109" },
        { x: 1603, y: 354, text: "F108" },
        { x: 1603, y: 225, text: "F107" },
        { x: 1603, y: 225, text: "F106" },
        { x: 1443, y: 826, text: "F105" },
        { x: 1443, y: 780, text: "F104" },
        { x: 1443, y: 697, text: "F103" },
        { x: 1443, y: 628, text: "F102" },
        { x: 1443, y: 597, text: "F101" },
        { x: 1443, y: 544, text: "F100" },
        { x: 1443, y: 470, text: "F099" },
        { x: 1443, y: 378, text: "F098" },
        { x: 1443, y: 350, text: "F097" },
        { x: 1443, y: 250, text: "F096" },
        { x: 1443, y: 190, text: "F095" },
        { x: 1443, y: 802, text: "F094" },
        { x: 1443, y: 758, text: "F093" },
        { x: 1443, y: 719, text: "F092" },
        { x: 1443, y: 675, text: "F091" },
        { x: 1443, y: 628, text: "F090" },
        { x: 1443, y: 597, text: "F089" },
        { x: 1443, y: 544, text: "F088" },
        { x: 1443, y: 513, text: "F087" },
        { x: 1443, y: 438, text: "F086" },
        { x: 1443, y: 411, text: "F085" },
        { x: 1443, y: 316, text: "F084" },
        { x: 1443, y: 289, text: "F083" },
        { x: 1443, y: 217, text: "F082" },
        { x: 1443, y: 190, text: "F081" },
        { x: 1267, y: 835, text: "F080" },
        { x: 1267, y: 768, text: "F079" },
        { x: 1267, y: 741, text: "F999" },
        { x: 1267, y: 670, text: "F078" },
        { x: 1267, y: 634, text: "F077" },
        { x: 1267, y: 607, text: "F076" },
        { x: 1267, y: 561, text: "F075" },
        { x: 1267, y: 534, text: "F074" },
        { x: 1267, y: 493, text: "F073" },
        { x: 1267, y: 405, text: "F072" },
        { x: 1267, y: 365, text: "F071" },
        { x: 1267, y: 338, text: "F070" },
        { x: 1267, y: 296, text: "F069" },
        { x: 1267, y: 275, text: "F068" },
        { x: 1267, y: 237, text: "F067" },
        { x: 1267, y: 194, text: "F066" },
        { x: 1267, y: 153, text: "F065" },
        { x: 1267, y: 92, text: "B2F421" },
        { x: 1267, y: 835, text: "F064" },
        { x: 1267, y: 768, text: "F063" },
        { x: 1267, y: 741, text: "F062" },
        { x: 1267, y: 697, text: "F061" },
        { x: 1267, y: 670, text: "F060" },
        { x: 1267, y: 634, text: "F059" },
        { x: 1267, y: 607, text: "F058" },
        { x: 1267, y: 561, text: "F057" },
        { x: 1267, y: 534, text: "F056" },
        { x: 1267, y: 493, text: "F055" },
        { x: 1267, y: 467, text: "F054" },
        { x: 1267, y: 431, text: "F053" },
        { x: 1267, y: 405, text: "F052" },
        { x: 1267, y: 365, text: "F051" },
        { x: 1267, y: 338, text: "F050" },
        { x: 1267, y: 296, text: "F049" },
        { x: 1267, y: 275, text: "F048" },
        { x: 1267, y: 237, text: "F047" },
        { x: 1267, y: 215, text: "F888" },
        { x: 1267, y: 194, text: "F046" },
        { x: 1267, y: 153, text: "F045" },
        { x: 1108, y: 835, text: "F044" },
        { x: 1108, y: 798, text: "F043" },
        { x: 1108, y: 771, text: "F042" },
        { x: 1108, y: 734, text: "F041" },
        { x: 1108, y: 708, text: "F040" },
        { x: 1108, y: 670, text: "F039" },
        { x: 1108, y: 643, text: "F038" },
        { x: 1108, y: 607, text: "F037" },
        { x: 1108, y: 581, text: "F036" },
        { x: 1108, y: 544, text: "F035" },
        { x: 1108, y: 518, text: "F034" },
        { x: 1108, y: 480, text: "F033" },
        { x: 1108, y: 454, text: "F032" },
        { x: 1108, y: 416, text: "F031" },
        { x: 1108, y: 390, text: "F030" },
        { x: 1108, y: 353, text: "F029" },
        { x: 1108, y: 326, text: "F028" },
        { x: 1108, y: 284, text: "F027" },
        { x: 1108, y: 258, text: "F026" },
        { x: 1108, y: 221, text: "F025" },
        { x: 1108, y: 194, text: "F024" },
        { x: 1108, y: 154, text: "F023" },
        { x: 1108, y: 92, text: "B2F411" },
        { x: 1108, y: 835, text: "F022" },
        { x: 1108, y: 798, text: "F021" },
        { x: 1108, y: 771, text: "F020" },
        { x: 1108, y: 734, text: "F019" },
        { x: 1108, y: 708, text: "F018" },
        { x: 1108, y: 670, text: "F017" },
        { x: 1108, y: 643, text: "F016" },
        { x: 1108, y: 607, text: "F015" },
        { x: 1108, y: 581, text: "F014" },
        { x: 1108, y: 544, text: "F013" },
        { x: 1108, y: 518, text: "F012" },
        { x: 1108, y: 480, text: "F011" },
        { x: 1108, y: 454, text: "F010" },
        { x: 1108, y: 416, text: "F009" },
        { x: 1108, y: 390, text: "F008" },
        { x: 1108, y: 353, text: "F007" },
        { x: 1108, y: 326, text: "F006" },
        { x: 1108, y: 284, text: "F005" },
        { x: 1108, y: 258, text: "F004" },
        { x: 1108, y: 221, text: "F003" },
        { x: 1108, y: 194, text: "F002" },
        { x: 1108, y: 154, text: "F001" },
      ],
      routes2: [
        { x: 126, y: 873, text: "FZ06" },
        { x: 228, y: 873, text: "FZ07" },
        { x: 329, y: 873, text: "FZ08" },
        { x: 433, y: 873, text: "FZ09" },
        { x: 534, y: 873, text: "FZ10" },
        { x: 635, y: 873, text: "FZ11" },
        { x: 756, y: 873, text: "FZ12" },
        { x: 862, y: 873, text: "FZ13" },
        { x: 1771, y: 125, text: "B2F101" },
        { x: 1771, y: 262, text: "B2F102" },
        { x: 1771, y: 222, text: "PK252" },
        { x: 1771, y: 235, text: "PK257" },
        { x: 1771, y: 398, text: "B2F103" },
        { x: 1771, y: 355, text: "PK251" },
        { x: 1771, y: 370, text: "PK256" },
        { x: 1771, y: 535, text: "B2F104" },
        { x: 1771, y: 495, text: "PK250" },
        { x: 1771, y: 510, text: "PK255" },
        { x: 1771, y: 671, text: "B2F105" },
        { x: 1771, y: 632, text: "PK249" },
        { x: 1771, y: 648, text: "PK254" },
        { x: 1771, y: 808, text: "B2F106" },
        { x: 1771, y: 770, text: "PK248" },
        { x: 1771, y: 785, text: "PK253" },
        { x: 1771, y: 873, text: "FZ01" },
        { x: 1835, y: 910, text: "FZ02" },
        { x: 1771, y: 946, text: "FZ03" },
        { x: 1603, y: 835, text: "B2F441" },
        { x: 1603, y: 873, text: "B2F221" },
        { x: 1442, y: 873, text: "B2F431" },
        { x: 1380, y: 873, text: "B2F220" },
        { x: 1332, y: 873, text: "B2F219" },
        { x: 1267, y: 873, text: "B2F218" },
        { x: 1108, y: 874, text: "B2F217" },
        { x: 1009, y: 853, text: "B2F216" },
        { x: 998, y: 745, text: "B2F215" },
        { x: 965, y: 745, text: "B2F214" },
        { x: 932, y: 745, text: "B2F213" },
        { x: 976, y: 945, text: "B2F222" },
        { x: 840, y: 873, text: "B2F211" },
        { x: 922, y: 875, text: "B2F212" },
        { x: 734, y: 873, text: "B2F210" },
        { x: 612, y: 873, text: "B2F209" },
        { x: 512, y: 873, text: "B2F208" },
        { x: 410, y: 873, text: "B2F207" },
        { x: 308, y: 873, text: "B2F206" },
        { x: 206, y: 873, text: "B2F205" },
        { x: 103, y: 873, text: "B2F204" },
        { x: 1065, y: 903, text: "B2F201" },
        { x: 679, y: 945, text: "B2F202" },
        { x: 354, y: 943, text: "B2F203" },
        { x: 55, y: 910, text: "FZ05" },
        { x: 95, y: 943, text: "FZ04" },

        { x: 104, y: 176, text: "B2F312" },
        { x: 104, y: 228, text: "PK202" },
        { x: 126, y: 268, text: "B2F313" },
        { x: 126, y: 228, text: "PK205" },
        { x: 104, y: 543, text: "B2F311" },
        { x: 104, y: 660, text: "PK201" },
        { x: 126, y: 543, text: "B2F314" },
        { x: 126, y: 448, text: "PK204" },
        { x: 126, y: 759, text: "B2F315" },
        { x: 126, y: 660, text: "PK203" },

        { x: 208, y: 115, text: "B2F323" },
        { x: 206, y: 174, text: "PK208" },
        { x: 228, y: 268, text: "B2F324" },
        { x: 228, y: 174, text: "PK211" },
        { x: 208, y: 350, text: "B2F322" },
        { x: 206, y: 393, text: "PK207" },
        { x: 228, y: 510, text: "B2F325" },
        { x: 228, y: 393, text: "PK210" },
        { x: 208, y: 600, text: "B2F321" },
        { x: 206, y: 708, text: "PK206" },
        { x: 228, y: 760, text: "B2F326" },
        { x: 228, y: 708, text: "PK209" },

        { x: 308, y: 113, text: "B2F333" },
        { x: 308, y: 228, text: "PK214" },
        { x: 308, y: 350, text: "B2F332" },
        { x: 308, y: 448, text: "PK213" },
        { x: 308, y: 600, text: "B2F331" },
        { x: 308, y: 660, text: "PK212" },
        { x: 329, y: 267, text: "B2F334" },
        { x: 329, y: 228, text: "PK217" },
        { x: 329, y: 510, text: "B2F335" },
        { x: 329, y: 448, text: "PK216" },
        { x: 329, y: 760, text: "B2F336" },
        { x: 329, y: 660, text: "PK215" },

        { x: 412, y: 113, text: "B2F343" },
        { x: 412, y: 170, text: "PK220" },
        { x: 412, y: 350, text: "B2F342" },
        { x: 412, y: 393, text: "PK219" },
        { x: 412, y: 600, text: "B2F341" },
        { x: 412, y: 708, text: "PK218" },
        { x: 434, y: 265, text: "B2F344" },
        { x: 434, y: 170, text: "PK223" },
        { x: 434, y: 510, text: "B2F345" },
        { x: 434, y: 393, text: "PK222" },
        { x: 433, y: 761, text: "B2F346" },
        { x: 433, y: 708, text: "PK221" },

        { x: 512, y: 113, text: "B2F353" },
        { x: 512, y: 228, text: "PK226" },
        { x: 512, y: 340, text: "B2F352" },
        { x: 512, y: 448, text: "PK225" },
        { x: 512, y: 593, text: "B2F351" },
        { x: 512, y: 660, text: "PK224" },
        { x: 534, y: 288, text: "B2F354" },
        { x: 534, y: 228, text: "PK229" },
        { x: 534, y: 495, text: "B2F355" },
        { x: 534, y: 448, text: "PK228" },
        { x: 534, y: 750, text: "B2F356" },
        { x: 534, y: 660, text: "PK227" },

        { x: 612, y: 113, text: "B2F363" },
        { x: 612, y: 170, text: "PK232" },
        { x: 612, y: 340, text: "B2F362" },
        { x: 612, y: 393, text: "PK231" },
        { x: 612, y: 595, text: "B2F361" },
        { x: 612, y: 708, text: "PK230" },
        { x: 635, y: 288, text: "B2F364" },
        { x: 635, y: 170, text: "PK235" },
        { x: 635, y: 497, text: "B2F365" },
        { x: 635, y: 393, text: "PK234" },
        { x: 635, y: 750, text: "B2F366" },
        { x: 635, y: 708, text: "PK233" },

        { x: 733, y: 113, text: "B2F373" },
        { x: 733, y: 228, text: "PK238" },
        { x: 733, y: 342, text: "B2F372" },
        { x: 733, y: 448, text: "PK237" },
        { x: 733, y: 595, text: "B2F371" },
        { x: 733, y: 655, text: "PK236" },
        { x: 756, y: 286, text: "B2F374" },
        { x: 756, y: 228, text: "PK241" },
        { x: 756, y: 498, text: "B2F375" },
        { x: 756, y: 448, text: "PK240" },
        { x: 756, y: 750, text: "B2F376" },
        { x: 756, y: 655, text: "PK239" },

        { x: 839, y: 114, text: "B2F383" },
        { x: 839, y: 170, text: "PK244" },
        { x: 840, y: 349, text: "B2F382" },
        { x: 839, y: 393, text: "PK243" },
        { x: 839, y: 600, text: "B2F381" },
        { x: 839, y: 708, text: "PK242" },
        { x: 862, y: 268, text: "B2F384" },
        { x: 862, y: 170, text: "PK247" },
        { x: 862, y: 510, text: "B2F385" },
        { x: 862, y: 393, text: "PK246" },
        { x: 862, y: 763, text: "B2F386" },
        { x: 862, y: 708, text: "PK245" },

        { x: 1603, y: 743, text: "F125" },
        { x: 1603, y: 743, text: "F124" },
        { x: 1603, y: 613, text: "F123" },
        { x: 1603, y: 613, text: "F122" },
        { x: 1603, y: 484, text: "F121" },
        { x: 1603, y: 484, text: "F120" },
        { x: 1603, y: 354, text: "F119" },
        { x: 1603, y: 354, text: "F118" },
        { x: 1603, y: 225, text: "F117" },
        { x: 1603, y: 225, text: "F116" },

        { x: 1603, y: 743, text: "F115" },
        { x: 1603, y: 743, text: "F114" },
        { x: 1603, y: 613, text: "F113" },
        { x: 1603, y: 613, text: "F112" },
        { x: 1603, y: 484, text: "F111" },
        { x: 1603, y: 484, text: "F110" },
        { x: 1603, y: 354, text: "F109" },
        { x: 1603, y: 354, text: "F108" },
        { x: 1603, y: 225, text: "F107" },
        { x: 1603, y: 225, text: "F106" },

        { x: 1443, y: 826, text: "F105" },
        { x: 1443, y: 780, text: "F104" },
        { x: 1443, y: 697, text: "F103" },
        { x: 1443, y: 628, text: "F102" },
        { x: 1443, y: 597, text: "F101" },
        { x: 1443, y: 544, text: "F100" },
        { x: 1443, y: 470, text: "F099" },
        { x: 1443, y: 378, text: "F098" },
        { x: 1443, y: 350, text: "F097" },
        { x: 1443, y: 250, text: "F096" },
        { x: 1443, y: 190, text: "F095" },

        { x: 1443, y: 802, text: "F094" },
        { x: 1443, y: 758, text: "F093" },
        { x: 1443, y: 719, text: "F092" },
        { x: 1443, y: 675, text: "F091" },
        { x: 1443, y: 628, text: "F090" },
        { x: 1443, y: 597, text: "F089" },
        { x: 1443, y: 544, text: "F088" },
        { x: 1443, y: 513, text: "F087" },
        { x: 1443, y: 438, text: "F086" },
        { x: 1443, y: 411, text: "F085" },
        { x: 1443, y: 316, text: "F084" },
        { x: 1443, y: 289, text: "F083" },
        { x: 1443, y: 217, text: "F082" },
        { x: 1443, y: 190, text: "F081" },

        { x: 1267, y: 835, text: "F080" },
        { x: 1267, y: 768, text: "F079" },
        { x: 1267, y: 741, text: "F999" },
        { x: 1267, y: 670, text: "F078" },
        { x: 1267, y: 634, text: "F077" },
        { x: 1267, y: 607, text: "F076" },
        { x: 1267, y: 561, text: "F075" },
        { x: 1267, y: 534, text: "F074" },
        { x: 1267, y: 493, text: "F073" },
        { x: 1267, y: 405, text: "F072" },
        { x: 1267, y: 365, text: "F071" },
        { x: 1267, y: 338, text: "F070" },
        { x: 1267, y: 296, text: "F069" },
        { x: 1267, y: 275, text: "F068" },
        { x: 1267, y: 237, text: "F067" },
        { x: 1267, y: 194, text: "F066" },
        { x: 1267, y: 153, text: "F065" },
        { x: 1267, y: 92, text: "B2F421" },

        { x: 1267, y: 835, text: "F064" },
        { x: 1267, y: 768, text: "F063" },
        { x: 1267, y: 741, text: "F062" },
        { x: 1267, y: 697, text: "F061" },
        { x: 1267, y: 670, text: "F060" },
        { x: 1267, y: 634, text: "F059" },
        { x: 1267, y: 607, text: "F058" },
        { x: 1267, y: 561, text: "F057" },
        { x: 1267, y: 534, text: "F056" },
        { x: 1267, y: 493, text: "F055" },
        { x: 1267, y: 467, text: "F054" },
        { x: 1267, y: 431, text: "F053" },
        { x: 1267, y: 405, text: "F052" },
        { x: 1267, y: 365, text: "F051" },
        { x: 1267, y: 338, text: "F050" },
        { x: 1267, y: 296, text: "F049" },
        { x: 1267, y: 275, text: "F048" },
        { x: 1267, y: 237, text: "F047" },
        { x: 1267, y: 215, text: "F888" },
        { x: 1267, y: 194, text: "F046" },
        { x: 1267, y: 153, text: "F045" },

        { x: 1108, y: 835, text: "F044" },
        { x: 1108, y: 798, text: "F043" },
        { x: 1108, y: 771, text: "F042" },
        { x: 1108, y: 734, text: "F041" },
        { x: 1108, y: 708, text: "F040" },
        { x: 1108, y: 670, text: "F039" },
        { x: 1108, y: 643, text: "F038" },
        { x: 1108, y: 607, text: "F037" },
        { x: 1108, y: 581, text: "F036" },
        { x: 1108, y: 544, text: "F035" },
        { x: 1108, y: 518, text: "F034" },
        { x: 1108, y: 480, text: "F033" },
        { x: 1108, y: 454, text: "F032" },
        { x: 1108, y: 416, text: "F031" },
        { x: 1108, y: 390, text: "F030" },
        { x: 1108, y: 353, text: "F029" },
        { x: 1108, y: 326, text: "F028" },
        { x: 1108, y: 284, text: "F027" },
        { x: 1108, y: 258, text: "F026" },
        { x: 1108, y: 221, text: "F025" },
        { x: 1108, y: 194, text: "F024" },
        { x: 1108, y: 154, text: "F023" },
        { x: 1108, y: 92, text: "B2F411" },

        { x: 1108, y: 835, text: "F022" },
        { x: 1108, y: 798, text: "F021" },
        { x: 1108, y: 771, text: "F020" },
        { x: 1108, y: 734, text: "F019" },
        { x: 1108, y: 708, text: "F018" },
        { x: 1108, y: 670, text: "F017" },
        { x: 1108, y: 643, text: "F016" },
        { x: 1108, y: 607, text: "F015" },
        { x: 1108, y: 581, text: "F014" },
        { x: 1108, y: 544, text: "F013" },
        { x: 1108, y: 518, text: "F012" },
        { x: 1108, y: 480, text: "F011" },
        { x: 1108, y: 454, text: "F010" },
        { x: 1108, y: 416, text: "F009" },
        { x: 1108, y: 390, text: "F008" },
        { x: 1108, y: 353, text: "F007" },
        { x: 1108, y: 326, text: "F006" },
        { x: 1108, y: 284, text: "F005" },
        { x: 1108, y: 258, text: "F004" },
        { x: 1108, y: 221, text: "F003" },
        { x: 1108, y: 194, text: "F002" },
        { x: 1108, y: 154, text: "F001" },
      ],
      arr: [],
      routes: [],
      array: [
        { x: 839, y: 393, text: "PK243" },
        { x: 839, y: 600, text: "B2F381" },
        { x: 839, y: 708, text: "PK242" },
        { x: 862, y: 268, text: "B2F384" },
        { x: 862, y: 170, text: "PK247" },
        { x: 862, y: 510, text: "B2F385" },
        { x: 862, y: 393, text: "PK246" },
      ],
      Numcanvas: "",
      containerList: [],
      totalNum: null,
    };
  },
  created() {
    // this.handleData();
    // this.getcontainerData();
  },
  computed: {
    getLabel() {
      return (value) => {
        switch (value) {
          case 0.3:
            return "快进";
          case 0.2:
            return "正常";
          case 0.05:
            return "慢放";
          default:
            return "";
        }
      };
    },
  },
  mounted() {
    this.calculateTimeDiff();
    // 自适应窗口
    // const bodyScale = function () {
    //   let deviceWidth = document.documentElement.clientWidth;
    //   let scale = deviceWidth / 1920;
    //   document.body.style.zoom = scale;
    // };

    // if (window.screen.width > 1200) {
    //   window.onload = window.onresize = function () {
    //     bodyScale();
    //   };
    // }
    //获取 canvas 元素
    // const canvas1 = this.$refs.canvas1;
    // const ctx1 = canvas1.getContext("2d");

    // // 设置点的样式属性
    // ctx1.fillStyle = "red"; // 点的颜色
    // ctx1.strokeStyle = "white"; // 点的边框颜色

    // // 遍历 routes 数组，绘制每个点
    // const points = this.routes1;
    // for (let i = 0; i < points.length; i++) {
    //   const point = points[i];
    //   const x = point.x;
    //   const y = point.y;
    //   if (point.text.substring(0, 2) == "PK") {
    //     ctx1.fillStyle = "gray"; // 点的颜色
    //     ctx1.strokeStyle = "white"; // 点的边框颜色
    //   } else {
    //     ctx1.fillStyle = "red"; // 点的颜色
    //     ctx1.strokeStyle = "white"; // 点的边框颜色
    //   }
    //   // 绘制点
    //   ctx1.beginPath();
    //   ctx1.arc(x, y, 5, 0, 2 * Math.PI);
    //   ctx1.stroke();
    //   ctx1.fill();

    //   // 绘制标签文字
    //   ctx1.fillStyle = "white";
    //   ctx1.textAlign = "center";
    //   ctx1.fillText(point.text, x, y + 15);
    // }
  },
  watch: {
    nextPointIndex: {
      handler(newValue) {
        if (newValue == this.routes.length - 1) {
          clearInterval(this.setIntervaltime);
        }
      },
      deep: true,
    },
  },
  methods: {
    // 箱子查询
    handledrawer() {
      this.drawer = true;
      containerlistData().then((res) => {
        this.totalNum = res.data.length;
        this.containerList = res.data;
        // this.containerList = res.data.map((item) => {
        //   return { boxback: item.boxback, addTime: item.addTime,packStatus };
        // });
      });
    },
    // 点位箱数查询
    // getContainerNum() {
    //   //获取 canvas 元素
    //   this.Numcanvas = document.getElementById("canvas");
    //   this.ctx1 = this.Numcanvas.getContext("2d");

    //   // 设置点的样式属性
    //   // this.ctx1.fillStyle = "red"; // 点的颜色
    //   // this.ctx1.strokeStyle = "white"; // 点的边框颜色

    //   // 遍历 routes 数组，绘制每个点
    //   const points = this.routes1;
    //   for (let i = 0; i < points.length; i++) {
    //     const point = points[i];
    //     const x = point.x;
    //     const y = point.y;

    //     if (point.text.substring(0, 2) == "PK") {
    //       this.ctx1.fillStyle = "#5df3ff"; // 点的颜色
    //       this.ctx1.strokeStyle = "white"; // 点的边框颜色
    //     } else {
    //       this.ctx1.fillStyle = "red"; // 点的颜色
    //       this.ctx1.strokeStyle = "white"; // 点的边框颜色
    //     }
    //     // 绘制点
    //     this.ctx1.beginPath();
    //     // this.ctx1.arc(x, y, 6, 0, 2 * Math.PI);
    //     this.drawTriangle(this.ctx1, x, y, 10);
    //     this.ctx1.stroke();
    //     this.ctx1.fill();

    //     // 绘制标签文字
    //     this.ctx1.fillStyle = "white";
    //     this.ctx1.textAlign = "center";
    //     this.ctx1.fillText(point.text, x, y + 15);
    //     this.Numcanvas.addEventListener("click", (event) =>
    //       this.getcontainerNum(event)
    //     );
    //   }
    // },
    goBack() {
      this.$router.push("/subSystem1");
    },
    //转换时间戳
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      console.log(year, month, day);
      //   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return `${hours}:${minutes}:${seconds}`;
    },
    calculateTimeDiff() {
      //   this.targetTime = this.timeDiff ? this.timeDiff : new Date().getTime();
      if (this.timeDiff) {
        this.setIntervaltime = setInterval(() => {
          const systemTime = new Date();
          console.log("时间戳",new Date(this.timeDiff).getTime());
          const timeDiff = systemTime.getTime() - new Date(this.timeDiff).getTime();
          const diffInMilliseconds = Math.max(timeDiff, 0); // 如果时间差为负数，则将时间差置为零
          const hours = Math.floor(diffInMilliseconds / (1000 * 60 * 60));
          const formattedHours = hours < 10 ? `0${hours}` : hours;
          const minutes = Math.floor(
            (diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60)
          );
          const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
          const seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);
          const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
          this.timeNew = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
          console.log(111,this.timeNew);
        }, 1000);
      } else {
        this.timeNew = "00:00:00";
      }
    },
    openLoading() {
      const loading = this.$loading({
        // 声明一个loading对象
        lock: true, // 是否锁屏
        fullScreen: true, //是否为全屏 Dialog
        background: "rgba(255,255,255,0.7)", //遮罩背景色
      });
      setTimeout(function () {
        // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        loading.close(); // 关闭遮罩层
      }, 22000);
      return loading;
    },
    init(routes) {
      //   console.log("123", routes);
      this.animatePoint = { x: 0, y: 0 };
      this.nextPointIndex = 1;
      this.ctx.clearRect(0, 0, this.cvs.clientWidth, this.cvs.clientHeight);
      if (routes.length > 0) {
        this.points.push({
          x: routes[0].x,
          y: routes[0].y,
          text: routes[0].text,
        });
        this.animatePoint = {
          x: routes[0].x,
          y: routes[0].y,
          text: routes[0].text,
        };
        this.drawPoint(routes[0].x, routes[0].y);
      }
      if (routes.length > 1) {
        this.startTimer();
      }
    },
    startTimer() {
      this.startTime = new Date().getTime();
      if (this.routes.length > 1) {
        this.clearTimer();
        this.animate();
      }
    },
    clearTimer() {
      window.cancelAnimationFrame(this.timer);
    },
    animate() {
      // 运动经过的时间
      this.timer = window.requestAnimationFrame(this.animate);
      this.startMove();
    },
    // drawCurve(x1, y1, x2, y2) {
    //   this.ctx.moveTo(x1, y1);
    //   // 计算控制点的坐标，使拐角处垂直向外
    //   const controlX = (x2 + x1) / 2;
    //   const controlY = y1;
    //   // 绘制二次贝塞尔曲线
    //   this.ctx.quadraticCurveTo(controlX, controlY, x2, y2);
    //   this.ctx.stroke();
    // },
    startMove() {
      let routes = this.routes;
      let targetDistance = Math.sqrt(
        Math.pow(
          routes[this.nextPointIndex - 1].x - routes[this.nextPointIndex].x,
          2
        ) +
          Math.pow(
            routes[this.nextPointIndex - 1].y - routes[this.nextPointIndex].y,
            2
          )
      );

      let currentDistance = Math.sqrt(
        Math.pow(routes[this.nextPointIndex - 1].x - this.animatePoint.x, 2) +
          Math.pow(routes[this.nextPointIndex - 1].y - this.animatePoint.y, 2)
      );

      if (currentDistance >= targetDistance) {
        //利用运动距离与目标距离, 判断运动的点是否超过下一个目标点, 超过了就重置下一个点
        this.startTime = new Date().getTime();
        this.points[this.nextPointIndex] = {
          x: routes[this.nextPointIndex].x,
          y: routes[this.nextPointIndex].y,
          text: routes[this.nextPointIndex].text,
          subSeconds: routes[this.nextPointIndex].subSeconds,
        };

        this.animatePoint = {
          x: routes[this.nextPointIndex].x,
          y: routes[this.nextPointIndex].y,
          text: routes[this.nextPointIndex].text,
          subSeconds: routes[this.nextPointIndex].subSeconds,
        };

        this.nextPointIndex++;

        this.clearTimer();
        if (this.nextPointIndex <= routes.length - 1) {
          setTimeout(() => {
            this.startTimer();
          }, 500);
        }

        //重绘
        this.ctx.clearRect(0, 0, this.cvs.clientWidth, this.cvs.clientHeight);
        this.drawPolygon(this.points);
        this.drawPoint(
          this.animatePoint.x,
          this.animatePoint.y,
          "yellow",
          this.animatePoint.text,
          this.animatePoint.subSeconds
        );
        return;
      }
      if (this.nextPointIndex > routes.length - 1) {
        //轨迹运动结束后, 关闭timer
        this.clearTimer();
        this.animatePoint = {
          x: routes[routes.length - 1].x,
          y: routes[routes.length - 1].y,
        };
      } else {
        // let speed = 0.25;
        let speed = this.speed;
        let deltaTime = new Date().getTime() - this.startTime;
        let deltaDistance = deltaTime * speed;
        let rate = deltaDistance / targetDistance;
        let x =
          routes[this.nextPointIndex - 1].x +
          (routes[this.nextPointIndex].x - routes[this.nextPointIndex - 1].x) *
            rate;
        let y =
          routes[this.nextPointIndex - 1].y +
          (routes[this.nextPointIndex].y - routes[this.nextPointIndex - 1].y) *
            rate;

        this.animatePoint.x = x;
        this.animatePoint.y = y;
        //重绘, 将animatePoint设为轨迹的下一个点, 以达到动态的效果
        this.points[this.nextPointIndex] = {
          x: this.animatePoint.x,
          y: this.animatePoint.y,
          text: this.animatePoint.text,
          subSeconds: this.animatePoint.subSeconds,
        };
        this.ctx.clearRect(0, 0, this.cvs.clientWidth, this.cvs.clientHeight);
        this.drawPolygon(this.points);
        this.cvs.addEventListener("click", (event) => this.getMousePos(event));
        this.drawPoint(
          this.animatePoint.x,
          this.animatePoint.y,
          "yellow",
          this.animatePoint.text,
          this.animatePoint.subSeconds
        );
      }
    },
    // 绘制点的方法
    drawPoint(x, y, color, textRend) {
      //绘制点
      // this.ctx.fillStyle = color || "#1DEFFF";
      this.ctx.fillStyle = color || "#D9A506"; //ff0000
      this.ctx.strokeStyle = "#35ff86";
      if (!color) {
        this.ctx.shadowColor = "#FFF";
        this.ctx.shadowBlur = 5;
      }
      this.ctx.beginPath();
      this.ctx.arc(x, y, 5, Math.PI * 2, 0, true);
      this.ctx.closePath();
      this.ctx.stroke();
      this.ctx.fill();
      //  绘制文字标签
      this.ctx.font = "bold 14px Arial"; // 设置字体加粗
      this.ctx.fillStyle = "#ed5b00";
      this.ctx.textAlign = "center";
      this.ctx.fillText(textRend || "", x + 10, y);
    },
    drawPoint1(x, y, color, textRend) {
      //绘制点
      // this.ctx.fillStyle = color || "#1DEFFF";
      this.ctx.fillStyle = color || "#D9A506"; //ff0000
      this.ctx.strokeStyle = "#35ff86";
      if (!color) {
        this.ctx.shadowColor = "#FFF";
        this.ctx.shadowBlur = 5;
      }
      this.ctx.beginPath();
      this.ctx.arc(x, y, 5, Math.PI * 3, 0, true);
      this.ctx.closePath();
      this.ctx.stroke();
      this.ctx.fill();
      //  绘制文字标签
      this.ctx.font = "bold 14px Arial"; // 设置字体加粗
      this.ctx.fillStyle = "#ed5b00";
      this.ctx.textAlign = "center";
      this.ctx.fillText(textRend || "", x + 10, y);
    },
    // 绘制正三角形
    drawTriangle(ctx, x, y, sideLength) {
      ctx.beginPath();
      ctx.moveTo(x, y - sideLength / Math.sqrt(3)); // 上顶点
      ctx.lineTo(x - sideLength / 2, y + sideLength / (2 * Math.sqrt(3))); // 左下顶点
      ctx.lineTo(x + sideLength / 2, y + sideLength / (2 * Math.sqrt(3))); // 右下顶点
      ctx.closePath(); // 封闭路径
      ctx.stroke(); // 绘制边框
      ctx.fill(); // 填充颜色
    },
    drawLeftArrow(
      startX,
      startY,
      arrowSize,
      arrowHeadWidth,
      arrowHeadHeight,
      arrowBodyWidth,
      color
    ) {
      this.ctx.beginPath();
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(startX - arrowBodyWidth, startY);
      this.ctx.lineTo(
        startX - arrowBodyWidth - arrowHeadWidth,
        startY + arrowHeadHeight / 2
      );
      this.ctx.lineTo(startX - arrowBodyWidth, startY + arrowHeadHeight);
      this.ctx.lineTo(startX, startY + arrowHeadHeight);
      this.fillStyle = color;
      this.ctx.fill();
      this.ctx.closePath();
    },
    drawLeftArrow1(
      startX,
      startY,
      arrowSize,
      arrowHeadWidth,
      arrowHeadHeight,
      arrowBodyWidth,
      color
    ) {
      this.ctx.beginPath();
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(startX + arrowBodyWidth, startY);
      this.ctx.lineTo(
        startX + arrowBodyWidth + arrowHeadWidth,
        startY + arrowHeadHeight / 2
      );
      this.ctx.lineTo(startX + arrowBodyWidth, startY + arrowHeadHeight);
      this.ctx.lineTo(startX, startY + arrowHeadHeight);
      this.fillStyle = color;
      this.ctx.fill();
      this.ctx.closePath();
    },
    drawPolygon(points) {
      //绘制轨迹
      this.ctx.clearRect(0, 0, this.cvs.clientWidth, this.cvs.clientHeight);
      // 绘制最后一个点
      this.drawPoint(this.lastItem.x, this.lastItem.y);
      const x = this.lastItem.x + 30;
      const y = this.lastItem.y;
      this.ctx.beginPath();
      this.drawLeftArrow1(x, y, 20, 8, 18, 45, "red");
      this.ctx.fillStyle = "#0060ff";
      this.ctx.fill();
      this.ctx.stroke();
      const Pkvalue = this.lastItem.text;
      const PksubSeconds = this.lastItem.subSeconds + "min";
      this.ctx.font = "bold 12px Arial"; // 设置字体加粗
      this.ctx.fillStyle = "#ff7eb6";
      this.ctx.shadowColor = "transparent";
      this.ctx.shadowBlur = 0;
      this.ctx.fillText(Pkvalue, x + 18, y - 10);
      this.ctx.fillText(PksubSeconds, x + 23, y + 12);

      //   this.ctx.strokeStyle = "#1DEFFF";
      //   this.ctx.shadowColor = "#1DEFFF";
      this.ctx.strokeStyle = "#FF7E86";
      this.ctx.shadowColor = "#FF7E86";
      this.ctx.shadowBlur = 5;
      this.ctx.lineWidth = 4;
      this.ctx.beginPath();
      this.ctx.moveTo(points[0].x, points[0].y);
      let i = 1,
        len = points.length;
      for (; i < len; i++) {
        // this.ctx.lineTo(points[i].x, points[i].y);
        if (
          points[i - 1].x !== points[i].x ||
          points[i - 1].y !== points[i].y
        ) {
          // (points[i - 1].x < points[i].x && points[i - 1].y < points[i].y)
          //   if ((points[i - 1].x > points[i].x && points[i - 1].y > points[i].y)||(points[i - 1].x < points[i].x && points[i - 1].y < points[i].y)) {
          //     const controlPointX = points[i].x;
          //     const controlPointY = points[i - 1].y;
          //     this.ctx.quadraticCurveTo(
          //       controlPointX,
          //       controlPointY,
          //       points[i].x,
          //       points[i].y
          //     );
          //   } else {
          //     const controlPointX = points[i - 1].x;
          //     const controlPointY = points[i].y;
          //     this.ctx.quadraticCurveTo(
          //       controlPointX,
          //       controlPointY,
          //       points[i].x,
          //       points[i].y
          //     );
          //   }
          const deltaY = points[i].y - points[i - 1].y;
          const deltaX = points[i].x - points[i - 1].x;
          const slope = deltaY / deltaX;
          if (slope > 0) {
            const controlPointX = points[i].x;
            const controlPointY = points[i - 1].y;
            this.ctx.quadraticCurveTo(
              controlPointX,
              controlPointY,
              points[i].x,
              points[i].y
            );
          } else {
            const controlPointX = points[i - 1].x;
            const controlPointY = points[i].y;
            this.ctx.quadraticCurveTo(
              controlPointX,
              controlPointY,
              points[i].x,
              points[i].y
            );
          }
        } else {
          this.ctx.lineTo(points[i].x, points[i].y);
        }
      }
      this.ctx.stroke();
      // let j = 0;
      // for (; j < len - 1; j++) {
      //   this.drawPoint(points[j].x, points[j].y);
      //   if (points[j].text.substring(0, 2) == "PK") {
      //     const x = points[j].x - 20;
      //     const y = points[j].y;
      //     const size = 8;
      //     this.ctx.beginPath();
      //     this.ctx.arc(x, y, size, 0, 2 * Math.PI);
      //     this.ctx.fillStyle = "red";
      //     this.ctx.fill();
      //     this.ctx.stroke();
      //     this.cvs.addEventListener("click", (e) => {

      //       const rect = this.cvs.getBoundingClientRect();
      //       const mouseX = e.clientX - rect.left;
      //       const mouseY = e.clientY - rect.top;
      //       if (this.isClickOnCircle(mouseX, mouseY,size)) {
      //         // 点击事件发生在圆内，显示文本提示
      //         const Pkvalue = points[j].text;
      //         const PksubSeconds = points[j].subSeconds + "s";
      //         this.ctx.fillStyle = "black";
      //         this.ctx.fillText(Pkvalue, x - 10, y - 10);
      //         this.ctx.fillText(PksubSeconds, x - 10, y + 10);
      //       }
      //     });
      //   }
      // }

      // let j = 0;
      // for (; j < len - 1; j++) {
      //   this.drawPoint(points[j].x, points[j].y);
      //   if (points[j].text.substring(0, 2) == "PK") {
      //     const x = points[j].x - 20;
      //     const y = points[j].y;
      //     const size = 8;
      //     this.ctx.beginPath();
      //     this.ctx.arc(x, y, size, 0, 2 * Math.PI);
      //     this.ctx.fillStyle = "red";
      //     this.ctx.fill();
      //     this.ctx.stroke();
      //     const Pkvalue = points[j].text;
      //     const PksubSeconds = points[j].subSeconds + "s";
      //     this.ctx.fillStyle = "black";
      //     this.ctx.fillText(Pkvalue, x - 10, y - 10);
      //     this.ctx.fillText(PksubSeconds, x - 10, y + 10);
      //   }
      // }

      let j = 0;
      for (; j < len - 1; j++) {
        if (j != len - 2) {
          this.drawPoint(points[j].x, points[j].y);
        } else {
          this.drawPoint1(points[j].x, points[j].y);
        }
        if (points[j].text == "B2F101" || points[j].text == "B2F201") {
          const x = points[j].x + 20;
          const y = points[j].y + 30;
          // const size = 8;
          this.ctx.beginPath();
          this.ctx.fillStyle = "#ff7eb6";
          this.ctx.fillRect(x, y, 115, 25);
          this.ctx.fill();
          this.ctx.stroke();
          const Pkvalue = "绑箱时间";
          // const PksubSeconds = this.formattedTime;
          const PksubSeconds = this.timeDiff;
          this.ctx.font = "bold 12px Arial"; // 设置字体加粗
          this.ctx.fillStyle = "#ffffff";
          // 去掉文字阴影
          this.ctx.shadowColor = "transparent";
          this.ctx.shadowBlur = 0;
          this.ctx.fillText(Pkvalue, x + 25, y - 10);
          this.ctx.fillText(PksubSeconds, x + 58, y + 15);
        }
        if (
          points[j].text == "B2F213" ||
          points[j].text == "B2F214" ||
          points[j].text == "B2F215"
        ) {
          const Pkvalue = points[j].text;
          this.ctx.fillText(Pkvalue, 965, 470);
          this.ctx.font = "bold 14px Arial"; // 设置字体加粗
          this.ctx.fillStyle = "#ffffff"; //00fffb
        }
        if (points[j].text.substring(0, 2) == "PK") {
          if (
            (252 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 258) ||
            (244 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 248) ||
            (238 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 242) ||
            (232 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 236) ||
            (226 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 230) ||
            (220 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 224) ||
            (214 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 218) ||
            (208 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 212) ||
            (202 < Number(points[j].text.substring(2, 5)) &&
              Number(points[j].text.substring(2, 5)) < 206)
          ) {
            const x = points[j].x + 30;
            const y = points[j].y;
            // const size = 8;
            this.ctx.beginPath();
            // this.ctx.arc(x, y, size, 0, 2 * Math.PI);
            // this.drawLeftArrow1(x, y, 20, 10, 16, 50, "red");
            this.drawLeftArrow1(x, y, 20, 8, 14, 35, "red");
            this.ctx.fillStyle = "#d9a506";
            this.ctx.fill();
            this.ctx.stroke();
            const Pkvalue = points[j].text;
            const PksubSeconds = points[j].subSeconds + "min";
            this.ctx.font = "bold 10px Arial"; // 设置字体加粗
            this.ctx.fillStyle = "#ffffff";
            this.ctx.fillText(Pkvalue, x + 15, y - 10);
            this.ctx.fillText(PksubSeconds, x + 20, y + 10);
          } else {
            const x = points[j].x - 20;
            const y = points[j].y;
            // const size = 8;
            this.ctx.beginPath();
            // this.ctx.arc(x, y, size, 0, 2 * Math.PI);
            this.drawLeftArrow(x, y, 20, 8, 14, 35, "red");
            this.ctx.fillStyle = "#d9a506";
            this.ctx.fill();
            this.ctx.stroke();
            const Pkvalue = points[j].text;
            const PksubSeconds = points[j].subSeconds + "min";
            this.ctx.font = "bold 10px Arial"; // 设置字体加粗
            this.ctx.fillStyle = "#ffffff"; //00fffb
            this.ctx.fillText(Pkvalue, x - 18, y - 10);
            this.ctx.fillText(PksubSeconds, x - 20, y + 10);
          }
        }
        if (points[j].text.substring(0, 1) == "F") {
          if (
            (Number(points[j].text.substring(2, 4)) > 80 &&
              Number(points[j].text.substring(2, 4)) < 101) ||
            (Number(points[j].text.substring(1, 4)) > 99 &&
              Number(points[j].text.substring(1, 4)) < 106)
          ) {
            const Pkvalue = points[j].text;
            this.ctx.fillText(Pkvalue, 1443, 105);
          } else if (
            Number(points[j].text.substring(1, 4)) > 105 &&
            Number(points[j].text.substring(1, 4)) < 126
          ) {
            const Pkvalue = points[j].text;
            this.ctx.fillText(Pkvalue, 1603, 105);
          }
          this.ctx.font = "bold 14px Arial"; // 设置字体加粗
          this.ctx.fillStyle = "#ffffff"; //00fffb
        }
      }
    },
    // getcontainerNum(e) {
    //   var rect = this.Numcanvas.getBoundingClientRect();
    //   this.xMouse =
    //     e.clientX - rect.left * (this.Numcanvas.width / this.Numcanvas.width);
    //   this.yMouse =
    //     e.clientY - rect.top * (this.Numcanvas.height / this.Numcanvas.height);
    //   console.log("x:" + this.xMouse + ",y:" + this.yMouse);
    //   this.dialogVisible = true;
    //   console.log(this.routes);
    //   for (let k = 0; k < this.routes.length; k++) {
    //     if (
    //       this.xMouse <= this.routes[k].x - 20 &&
    //       this.xMouse >= this.routes[k].x - 55 &&
    //       this.yMouse >= this.routes[k].y &&
    //       this.yMouse <= this.routes[k].y + 20
    //     ) {
    //       this.bMessage = this.routes[k].text;
    //       console.log(999, this.routes[k].text);
    //       this.dialogVisible = true;
    //     } else if (
    //       this.xMouse >= this.routes[k].x + 30 &&
    //       this.xMouse <= this.routes[k].x + 65 &&
    //       this.yMouse >= this.routes[k].y &&
    //       this.yMouse <= this.routes[k].y + 20
    //     ) {
    //       this.bMessage = this.routes[k].text;
    //       console.log(777, this.routes[k].text);
    //       this.dialogVisible = true;
    //     }
    //   }
    // },
    getMousePos(e) {
      var rect = this.cvs.getBoundingClientRect();
      this.xMouse = e.clientX - rect.left * (this.cvs.width / rect.width);
      this.yMouse = e.clientY - rect.top * (this.cvs.height / rect.height);
      console.log("x:" + this.xMouse + ",y:" + this.yMouse);
      for (let k = 0; k < this.routes.length; k++) {
        if (
          this.xMouse <= this.routes[k].x - 20 &&
          this.xMouse >= this.routes[k].x - 55 &&
          this.yMouse >= this.routes[k].y &&
          this.yMouse <= this.routes[k].y + 20
        ) {
          this.bMessage = this.routes[k].text;
          console.log(999, this.routes[k].text);
          this.dialogVisible = true;
        } else if (
          this.xMouse >= this.routes[k].x + 30 &&
          this.xMouse <= this.routes[k].x + 65 &&
          this.yMouse >= this.routes[k].y &&
          this.yMouse <= this.routes[k].y + 20
        ) {
          this.bMessage = this.routes[k].text;
          console.log(777, this.routes[k].text);
          this.dialogVisible = true;
        }
      }
    },
    // 点击箱号绘制
    getContainerlist(containerNo) {
      this.drawer = false;
      const pageLoading = this.openLoading();
      getcontainerNo(containerNo)
        .then((res) => {
          if (res.code === 500) {
            pageLoading.close();
            this.routes = [];
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          } else {
            this.arr = res.data.data;
            this.timeDiff = res.data.time;
            // this.formattedTime = this.formatTimestamp(this.timeDiff);
            this.lastNode = res.data.last.resourceNode;
            console.log(this.arr);
            this.calculateTimeDiff();
            this.routes = [];
            for (var k = 0; k < this.arr.length; k++) {
              this.routes2.map((item) => {
                if (item.text === this.arr[k].resourceNode) {
                  this.routes.push(item);
                }
              });
            }
            for (var i = 0; i < this.routes.length; i++) {
              this.arr.map((item) => {
                if (item.resourceNode == this.routes[i].text) {
                  this.routes[i].subSeconds = item.subSeconds;
                }
              });
            }
            if (res.code == "200") {
              pageLoading.close();
              this.cvs = document.getElementById("canvas");
              this.ctx = this.cvs.getContext("2d");
              this.routes.forEach((item, index) => {
                this.lastItem = this.routes[this.routes.length - 1];
              });
              this.points = [];
              this.init(this.routes);
            }
          }
        })
        .catch((err) => {
          console.log(err);
          pageLoading.close();
        });
    },
    //点击绘制
    getContainerNo() {
      if (this.containerNo) {
        if (/^\d{6}$/.test(this.containerNo)) {
          const pageLoading = this.openLoading();
          getcontainerNo(this.containerNo)
            .then((res) => {
              if (res.code === 500) {
                pageLoading.close();
                this.routes = [];
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
              } else {
                this.arr = res.data.data;
                this.timeDiff = res.data.time;
                // this.formattedTime = this.formatTimestamp(this.timeDiff);
                this.lastNode = res.data.last.resourceNode;
                console.log(this.arr);
                this.calculateTimeDiff();
                this.routes = [];
                for (var k = 0; k < this.arr.length; k++) {
                  this.routes2.map((item) => {
                    if (item.text === this.arr[k].resourceNode) {
                      this.routes.push(item);
                    }
                  });
                }
                for (var i = 0; i < this.routes.length; i++) {
                  this.arr.map((item) => {
                    if (item.resourceNode == this.routes[i].text) {
                      this.routes[i].subSeconds = item.subSeconds;
                    }
                  });
                }
                if (res.code == "200") {
                  pageLoading.close();
                  this.cvs = document.getElementById("canvas");
                  this.ctx = this.cvs.getContext("2d");
                  // this.routes.map((item) => {
                  //   if (item.text == this.lastNode) {
                  //     this.lastItem = item;
                  //   }
                  // });
                  this.routes.forEach((item, index) => {
                    this.lastItem = this.routes[this.routes.length - 1];
                  });
                  this.points = [];
                  this.init(this.routes);
                }
              }
            })
            .catch((err) => {
              console.log(err);
              pageLoading.close();
            });
        } else {
          this.$message({
            showClose: true,
            message: "请输入正确的箱号",
            type: "error",
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "请先输入箱号",
          type: "error",
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.times {
  float: right;
  width: 100px;
  border: 1px solid #ffffff;
  height: 40px;
  // margin-left: 1085px;
  margin-left: 1088px;
  margin-top: 35px;
  color: #e66515;
  text-align: center;
  line-height: 40px;
}
/* *{
  padding: 0;
  margin: 0;
} */
.home {
  position: relative;
  width: 1920px;
  height: 1080px;
}
.canvas1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* background: #a2ebd5; */
  background: url("../assets/images/guiji.png") no-repeat center bottom;
  background-size: 100% 100%;
}
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin-top: 10px;
  height: 60px;
}
.containerNum {
  position: absolute;
  top: 200px;
  left: 0;
  z-index: 4;
  cursor: pointer;
  .containerBtn {
    width: 30px;
    height: 200px;
    text-align: center;
    background: #337bff;
    border-radius: 8px;
    color: #ffffff;
  }
}
.totalBox {
  width: 100%;
  height: 30px;
  padding: 0 30px;
  color: #fff;
}
.containerBox {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .containerItem {
    width: 100px;
    height: 40px;
    //line-height: 40px;
    text-align: center;
    background: #1768ff;
    border-radius: 8px;
    color: #fff;
    margin: 6px;
    padding: 3px 0 0 0;
    cursor: pointer;
    .createtime{
      font-size: 14px;
      color: #f7e22b;
    }
  }
}
.canvas-box {
  width: 100%;
  height: 100%;
}
.canvas2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
::v-deep .el-button {
  display: inline-block;
  z-index: 2;
  background-color: transparent;
}
::v-deep .el-input {
  z-index: 2;
  width: 100px;
  margin-left: 70px;
  border: 1px solid #007bff;
  border-radius: 5px;
}
::v-deep .el-select {
  margin-left: 60px;
}
::v-deep .el-input__inner {
  background-color: #ffffff00;
}
.el-button {
  display: inline-block;
  z-index: 2;
  background-color: #007bff;
  color: #ffffff;
  margin-left: 30px;
}
.input-container {
  width: 210px;
}
.input-container ::placeholder {
  color: #ffffff;
}
::v-deep .el-input__inner {
  color: #ffffff;
}
.footer {
  z-index: 3;
  cursor: pointer;
  margin-top: 300px;
  img {
    width: 3%;
  }
}
.footerbg {
  position: absolute;
  cursor: pointer;
  background: #181d29;
  width: 1920px;
  height: 80px;
  margin-top: -80px;
  text-align: center;
  font-size: 12px;
}
.centerView {
  display: inline-block;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 30%;
    margin-top: -6px;
    margin-left: 30px;
  }
  span {
    color: #ffffffa4;
    display: block;
    margin-top: -36px;
    margin-left: 30px;
  }
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 30vh !important;
}
::v-deep .el-drawer__open .el-drawer.ltr {
  -webkit-animation: ltr-drawer-in 0.3s 1ms;
  animation: ltr-drawer-in 0.3s 1ms;
  background: #24353be1;
}
::v-deep .el-drawer__header {
  color: #ffffff;
}
</style>

